<template>
	<div class="mi-canvas-tools-item">
		<Poptip trigger="click"
				popper-class="mi-canvas-brush"
				:placement="G.mobile ? 'right' : 'top'"
				@on-popper-show="showPopper"
				transfer>
            <span class="mi-canvas-tools-icon" :class="active === 'brush' ? 'active' : null">
                <i :class="`iconfont icon-${icon}`" :style="theme=='dark'?'color: #fff':''"></i>
            </span>
			<div slot="content" style="padding: 5px 16px 16px 16px;border-radius: 14px;" :style="theme =='dark'?'background-color: #1d2334':''">
				<div class="mi-canvas-brush-item" id="mi-canvas-brush-item">
					<Tooltip :content="tool.name" v-for="(tool, index) in tools" :key="index" placement="top">
						<i class="iconfont" :class="getActiveClass(tool)" @click="toolSelect(tool)" :style="theme=='dark'?'color: #fff':''"></i>
					</Tooltip>
				</div>
			</div>
		</Poptip>
	</div>
</template>

<script lang="ts">
	import {Component, Emit, Prop, Vue} from 'vue-property-decorator';
	import {MiBrushData} from '@components/canvas/Tools';
	import {Getter} from 'vuex-class';
	import {i18n} from '@/i18n'

	@Component
	export default class BrushComponent extends Vue {
		@Prop() active: any;
		@Prop() color: any;
		@Prop() solid: any;
		@Prop() icon: any;

		@Emit() onShow(name: string) {
		}

		@Emit() toolSelect(tool: MiBrushData) {
			this.selection = tool.tool;
		}
		@Getter('getTheme', {}) theme: any;

		/** 选中工具 */
		selection = '';

		tools: { [index: number]: MiBrushData } = {
			0: {name: i18n.t('message.markingPen') as string, icon: 'pencil', tool: 'marker'},
			1: {name: i18n.t('message.LaserPen') as string, icon: 'laser', tool: 'laser'},
			2: {name: i18n.t('message.straightLine') as string, icon: 'line', tool: 'line'},
			3: {name: i18n.t('message.arrow') as string, icon: 'arrow', tool: 'arrow'},
			4: {name: i18n.t('message.SolidCircle') as string, icon: 'circle-solid', tool: 'circle', solid: true},
			5: {name: i18n.t('message.HollowCircular') as string, icon: 'circle', tool: 'circle', solid: false},
			6: {name: i18n.t('message.SolidRectangle') as string, icon: 'rect-solid', tool: 'rect', solid: true},
			7: {name: i18n.t('message.hollowRectangle') as string, icon: 'rect', tool: 'rect', solid: false}
		};

		showPopper(): void {
			if (!this.selection) this.selection = 'marker';
			this.onShow('brush');
		}

		getActiveClass(tool: MiBrushData) {
			const condition = this.selection === tool.tool &&
				(tool.solid !== undefined ? this.solid === tool.solid : true);
			return condition ? `icon-${tool.icon} active` : `icon-${tool.icon}`;
		}
	}
</script>
<style>
.ivu-poptip-body{
	padding: 0 !important;
}
</style>
